<template>
  <div class="home">
    <topnav />
    <banner :data="banner" />
    <van-grid :column-num="4">
      <van-grid-item
        v-for="item in gridList"
        :key="item.id"
        icon="photo-o"
        :text="item.text"
        :to="item.path"
      />
    </van-grid>
    <goodsList :list="newGoods" title="新品上线"/>
    <goodsList :list="hotGoods" title="热门商品"/>
    <goodsList :list="recommond" title="最新推荐">
      <template #default='commond'>
        <van-image :src="commond.data.goodsCoverImg"></van-image>
        <h5>{{commond.data.goodsName}}</h5>
      </template>
</goodsList>
</div>
</template>

<script>
    // @ is an alias to /src
    import {
        indexInfo
    } from "@/api/index.js";
    import topnav from "../components/home/topnav";
    import banner from "../components/home/banner";
    import goodsList from "../components/home/goodsList";
    export default {
        name: "Home",
        data() {
            return {
                gridList: [{
                    id: 1,
                    text: 'echart',
                    icon: 'apps-o',
                    path: '/echart'
                }, {
                    id: 2,
                    text: '模块一',
                    icon: 'apps-o',
                    path: '/list'
                }, {
                    id: 3,
                    text: '模块一',
                    icon: 'apps-o',
                    path: '/list'
                }, {
                    id: 4,
                    text: '模块一',
                    icon: 'apps-o',
                    path: '/list'
                }, {
                    id: 5,
                    text: '模块一',
                    icon: 'apps-o',
                    path: '/list'
                }, {
                    id: 6,
                    text: '模块一',
                    icon: 'apps-o',
                    path: '/list'
                }, {
                    id: 7,
                    text: '模块一',
                    icon: 'apps-o',
                    path: '/list'
                }, {
                    id: 8,
                    text: '模块一',
                    icon: 'apps-o',
                    path: '/list'
                }],

                banner: [],
                newGoods: [],
                hotGoods: [],
                recommond: [],
            };
        },
        components: {
            topnav,
            banner,
            goodsList,
        },
        created() {
            this.getData();
        },
        methods: {

            getData() {
                indexInfo().then((data) => {
                    console.log(data);
                    if (data.resultCode == 200) {
                        this.banner = Object.freeze(data.data.carousels);
                        this.newGoods = Object.freeze(data.data.newGoodses);
                        this.hotGoods = Object.freeze(data.data.hotGoodses);
                        this.recommond = Object.freeze(data.data.recommendGoodses);
                    }
                });
            },
        },
    };
</script>